import React, { useState } from 'react';
import './NewHubCard.scss';
import NewHubButton from '../components/NewHubButton';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import MuiAlert from '@mui/material/Alert';
import HidingAll from '../components/HidingAll';


const Alert = React.forwardRef(function Alert(props, ref) {
  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});



function NewHubCard() {
    const [showAddingPage, setShowAddingPage] = useState(false);
    const [open, setOpen] = React.useState(false);

    const addHub = () => {
        setShowAddingPage(true);
        console.log("asdf")
    }

    const closeHiding = () => {
        setShowAddingPage(false);
    }

    const handleClose = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }
        setOpen(false);
    };

    return (
        <div>
            <NewHubButton  func={addHub}/>
            { showAddingPage && (
                <div>
                    <HidingAll />
                    <div className="NewHubCard">
                        <h1 className="card-title">Добавить хаб</h1>
                        <Button variant="contained" 
                            id="my_button"
                            color="success" 
                            style={{width: "6cm", height: "1.5cm",
                                marginBottom: "0.5cm", backgroundColor: "#209D15", 
                                fontSize: "20px", borderRadius: "8px"}}>
                            Добавить хаб
                        </Button>
                        <Button variant="outlined" 
                            id="my_button"
                            color="error" 
                            onClick={closeHiding}
                            style={{width: "6cm", height: "1.5cm", fontSize: "20px", 
                                borderRadius: "8px"}}>
                            <b>Закрыть</b>
                        </Button>
                        <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
                            <Alert onClose={handleClose} 
                                severity="success" 
                                sx={{ width: '100%' }} 
                                style={{ transform: "translate(-100%, 200%)" }}>
                                Админ успешно добавлен
                            </Alert>
                        </Snackbar>
                    </div>
                </div>
            )}
        </div>
    )
}


export default NewHubCard;
